<template>
  <div>
    <one-title :title="titleText" @refreshData="refresh">
      <div class="mes_btn">
        <el-button
          class="search_btn"
          @click="_exportTable">
          <i class="iconfont icon-biaogedaochu"></i>
          导出
        </el-button>
      </div>
    </one-title>
    <div class="fixed_top_56">
      <div class="multiple_search">
        <div class="search_item">
          <div class="select_label">
            选择班组：
          </div>
          <div class="search_wrapper">
            <el-select
              v-model="workgroupId"
              placeholder="请选择班组"
              @change="handleGroup"
              size="small">
              <el-option
                v-for="(item,index) in workGroup"
                :key="index"
                :label="item.NAME"
                :value="item.ID">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="search_item">
          <div class="select_label">
            选择员工：
          </div>
          <div class="search_wrapper">
            <el-select
              :disabled="!workgroupId"
              v-model="staffIds"
              multiple
              collapse-tags
              placeholder="请选择员工"
              size="small">
              <el-option
                v-for="(item,index) in staffList"
                :key="index"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="search_item">
          <span class="search_label">工序完工日期：</span>
          <el-date-picker
            v-model="completionDate"
            type="daterange"
            size="small"
            align="right"
            :clearable=false
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            :picker-options="pickerOptions">
          </el-date-picker>
        </div>
        <div class="mes_btn">
          <el-button
            type="primary"
            icon="el-icon-search"
            class="search_btn"
            @click="_info">
          </el-button>
        </div>
      </div>
      <div class="table_container">
        <el-table
          ref="tableNode"
          :data="listData.list"
          border
          stripe
          v-loading="isLoading"
          style="width: 100%"
          :max-height="tableMaxHeight"
          @sort-change="_sort">
          <mes-col-comp
            :key="index"
            v-for="(column, index) in tableColumns"
            :column="column">
          </mes-col-comp>
        </el-table>
      </div>
      <!--分页组件-->
      <mes-pagination
        @updateData="init"
        :currentPage="listData.pageNo"
        :total="listData.count || 0"
        :pageSize="listData.pageSize">
      </mes-pagination>
    </div>
  </div>
</template>

<script>
import tableColumns from './tableColumns'
export default {
  name: 'TimeAbnormalTask',
  data() {
    return {
      tableColumns: tableColumns, // 表格列数据
      titleText: '开完工时间异常任务', // 页面标题
      isLoading: false, // 页面加载中
      searchResult: NaN, // 表格查询备注
      sortData: {}, // 表格排序
      searchData: {}, // 表格查询
      workgroupId: '', // 查询班组ID
      staffIds: [], // 查询人员ID
      completionDate: [], // 查询时间范围
      pickerOptions: this.$dateConfig.pickerOptions // 日期格式的快捷键配置项
    }
  },
  computed: {
    // 班组下拉列表
    workGroup() {
      const list = this.$store.state.timeAbnormalTask.workGroup
      return list.length ? [{NAME: '全部', ID: ''}, ...list] : [{NAME: '全部', ID: ''}]
    },
    // 人员下拉列表
    staffList() {
      return this.$store.state.timeAbnormalTask.staffList.list || []
    },
    // 图表数据
    listData() {
      return this.$store.state.timeAbnormalTask.listData || []
    },
    defaultDate() {
      return [
        this.moment(window.serverTime).subtract(1, 'months').format('YYYY-MM-DD 00:00:00'),
        this.moment(window.serverTime).format('YYYY-MM-DD 23:59:59')
      ]
    }
  },
  mounted() {
    this.completionDate = this.defaultDate
    this.init()
    this.getWorkGroup()
  },
  methods: {
    // 页面刷新
    refresh() {
      this.sortData = {}
      this.searchData = {}
      this.searchResult = NaN
      this.workgroupId = ''
      this.staffIds = []
      this.$refs.tableNode.clearSort()
      this.completionDate = this.defaultDate
      this.init()
    },
    // 选择班组
    handleGroup() {
      this.staffIds = []
      this.getStaffList()
    },
    // 查询
    _info() {
      this.init()
    },
    // 格式化数据
    formatPostData(page) {
      const fields = ['startWorkStaffNumber']
      const columns = this.tableColumns.reduce((pre, cur) => [...pre, cur.prop], fields)
      let postData = {
        pageNo: page ? page.pageNo : 1,
        pageSize: page ? page.pageSize : this.listData.pageSize || 15,
        sort: this.sortData,
        query: {
          columns: columns,
          workstageProcessStatusId: 'ID_WPST_3_Finished',
          viewSource: 5,
          ...this.searchData
        }
      }
      if (this.workgroupId) {
        postData.query.workgroupId = this.workgroupId
      }
      if (this.staffIds.length) {
        postData.query.startWorkStaffIdQueryByIn = this.staffIds.join(',')
      }
      if (this.completionDate.length > 0) {
        postData.query.beginPracticalEndDate = this.completionDate[0]
        postData.query.endPracticalEndDate = this.completionDate[1]
      }
      if (Object.keys(this.sortData).length === 0) {
        postData.sort = {workstageDuration: 'asc'}
      }
      return postData
    },
    // 获取列表
    init(page) {
      let postData = this.formatPostData(page)
      this.isLoading = true
      this.$store.dispatch('saveData', {
        method: 'post',
        url: 'a/turnoverworkstage/turnoverWorkstage/list',
        data: postData,
        module: 'timeAbnormalTask',
        state: 'listData'
      }).then((res) => {
        if (Object.keys(this.searchData).length > 0) {
          this.searchResult = res.count
        } else {
          this.searchResult = NaN
        }
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 表格排序
    _sort(obj) {
      this.sortData = this.$getSortOrder(obj)
      this.init()
    },
    // 导出表格
    _exportTable() {
      let postData = this.formatPostData({
        pageNo: 1,
        pageSize: 9999999
      }, [])
      this.$exportTable(postData, 'a/turnoverworkstage/turnoverWorkstage/exportasexcel', this.titleText)
    },
    // 获取班组列表
    getWorkGroup() {
      this.$store.dispatch('saveData', {
        method: 'get',
        url: 'a/workgroup/workgroup/listfields/id,name',
        module: 'timeAbnormalTask',
        state: 'workGroup'
      })
    },
    // 获取员工列表
    getStaffList() {
      this.$store.dispatch('setEmployeeList', {})
      this.$store.dispatch('saveData', {
        method: 'post',
        url: 'a/staff/staff/list',
        data: {
          pageNo: 1,
          pageSize: 999,
          query: {
            workgroupId: this.workgroupId,
            columns: ['name']
          }
        },
        module: 'timeAbnormalTask',
        state: 'staffList'
      }).then(() => {
        this.staffIds = this.staffList.reduce((pre, cur) => [...pre, cur.id], [])
      })
    },
  }
}
</script>

<style scoped>

</style>
